<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="client/header::header(null,null)"/>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .dialog {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 25%;
            height: 25%;
            margin-top: 150px;
            margin-left: 650px;
            background-color: rgb(226, 211, 211);
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="am-g am-g-fixed blog-fixed index-page"  >
        <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title"><span>dcg</span></h2>
                <img th:src="@{/assets/img/me.jpg}" alt="about me" class="blog-entry-img" onclick="showDialog()" style="cursor: pointer;"/>
                <p>
                    Java后台开发
                </p>
                <p>个人博客小站，主要发表关于旅游、风景、美食、Java、Spring、Docker等相关文章</p>
            </div>
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
                <p>
                    <a href="https://gitee.com/nanranccc/my-blog.git"><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                    <a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
                    <a><span class="am-icon-qq am-icon-fw blog-icon" onclick="showDialog()" style="cursor: pointer;"></span></a>
                </p>
                <!-- 对话框显示 -->
                <div id="myDialog" class="dialog">
                    <div class="dialog-content">
                        <span class="close" onclick="closeDialog()">&times;</span>
                        <img th:src="@{/assets/img/qq.jpg}" alt="Image" style="width:100%;">
                    </div>
                </div>
            </div>
            <!-- 阅读排行榜 -->
            <div class="am-u-md-4 am-u-sm-12 blog-sidebar" style="width: 400px;height: 400px">
                <div class="blog-sidebar-widget blog-bor">
                    <h2 class="blog-text-center blog-title"><span>阅读排行榜</span></h2>
                    <div style="text-align: left">
                        <th:block th:each="article :${articleList}">
                            <a style="font-size: 15px;" th:href="@{'/article/'+${article.id}}"
                               th:text="${articleStat.index+1}+'、'+${article.title}+'('+${article.hits}+')'">
                            </a>
                            <hr style="margin-top: 0.6rem;margin-bottom: 0.4rem"/>
                        </th:block>
                    </div>
                </div>
            </div>
        </div>

        <div class="am-u-md-8 am-u-sm-12">
            <!-- 文章遍历并分页展示 -->
            <div th:each="article: ${articles.list}">
                <div class="card" style="border: 1px solid black; border-radius: 10px;margin-top: 10px">
                    <div style="text-align: center; margin-top: 10px">
                        <img th:src="@{${commons.show_thumb(article)}}" class="card-img-top" alt="文章图片">
                    </div>
                    <div class="card-body" style="text-align: center">
                        <span class="blog-color" style="font-size: 15px;"><a>默认分类</a></span>
                        <span>&nbsp;&nbsp;&nbsp;</span>
                        <span style="font-size: 15px;" th:text="'发布于 '+ ${commons.dateFormat(article.created)}"></span>
                        <h2 class="card-title">
                            <a style="color: #0f9ae0;font-size: 20px;" th:href="${commons.permalink(article.id)}"
                               th:text="${article.title}"></a>
                        </h2>
                        <p class="card-text" style="font-size: 16px;" th:utext="${commons.intro(article,75)}"></p>
                    </div>
                </div>

            </div>
            <!-- 文章分页信息 -->
            <div class="am-pagination">
                <div th:replace="comm/paging::pageNav(${articles},'上一页','下一页','page')"/>
            </div>
        </div>
        <!-- 博主信息描述 -->

    </div>
    <script>
        function showDialog() {
            document.getElementById("myDialog").style.display = "block";
        }
        function closeDialog() {
            document.getElementById("myDialog").style.display = "none";
        }
    </script>

</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer"/>
</html>
